<template>
  <div>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in add" :key="item.id">
        <img :src="item.picUrl" alt="" />
      </van-swipe-item>
    </van-swipe>
    <van-divider
      :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"
    >
      商品列表
    </van-divider>

    <van-grid :column-num="2">
      <van-grid-item
        v-for="item in addlist"
        :key="item.id"
        @click="gomai(item.id)"
      >
        <img :src="item.pic" alt="" />
        <span>{{ item.name }}</span>
        <div class="a">
          <span>{{ item.minPrice }}</span>
          <p>{{ item.originalPrice }}</p>
          <van-button plain type="primary">购买</van-button>
        </div>
      </van-grid-item>
      <span class="aa">没有更多了</span>
    </van-grid>
  </div>
</template>

<script>
import { banner } from "@/api/login.js";
import { goods } from "@/api/login";
export default {
  name: "",

  data() {
    return {
      add: [],
      addlist: [],
    };
  },

  mounted() {
    this.banner();
    this.goodslist();
  },

  methods: {
    async banner() {
      let res = await banner();
      // console.log(res);
      this.add = res.data;
    },
    async goodslist() {
      let res = await goods();
      // console.log(res);
      this.addlist = res.data;
    },
    gomai(id) {
      this.$router.push({
        path: "/detail",
        query: {
          id,
        },
      });
    },
  },
};
</script>

<style lang="less" scoped>
.van-grid-item {
  p {
    text-decoration: line-through;
  }
  img {
    width: 100%;
    height: 100%;
  }
  button {
    width: 60px;
    height: 20px;
    text-align: center;
  }
}
.van-swipe-item {
  img {
    width: 100%;
    height: 100%;
  }
}
.a {
  display: flex;
  justify-content: center;
}
.van-grid-item {
  bottom: 70px;
}
.aa {
  position: relative;
  bottom: 80px;
  text-align: center;
  margin-left: 150px;
  color: gainsboro;
}
</style>